<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "3cc35eda22d484092ac36e0de9e5af28",
  };
  AMapLoader.load({
    key: "b8de38bd955b0757da882d7c17a46ad3", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    AMapUI: {
      version: "1.1",
      plugins: ["overlay/SimpleMarker"],
    },
  })
    .then((AMap) => {
      var map = new AMap.Map("container", {
        zoom: 10,
      });

      AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
        var poiPicker = new PoiPicker({
          input: "searchInput",
          placeSearchOptions: {
            map: map,
            pageSize: 10,
          },
          searchResultsContainer: "searchResults",
        });

        poiPicker.on("poiPicked", function (poiResult) {
          poiPicker.hideSearchResults();

          var source = poiResult.source,
            poi = poiResult.item;

          if (source !== "search") {
            //suggest来源的，同样调用搜索
            poiPicker.searchByKeyword(poi.name);
          } else {
            //console.log(poi);
          }
        });

        poiPicker.onCityReady(function () {
          poiPicker.searchByKeyword("美食");
        });
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="outer-box">
    <div id="container" class="map" tabindex="0"></div>
    <div id="panel" class="scrollbar1">
      <div id="searchBar">
        <input id="searchInput" placeholder="输入关键字搜素POI" />
      </div>
      <div id="searchResults"></div>
    </div>
  </div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 600px;
}
#outer-box {
  height: 100%;
  padding-right: 300px;
}

#panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  overflow: auto;
  width: 300px;
  z-index: 999;
  border-left: 1px solid #eaeaea;
  background: #fff;
}

#searchBar {
  height: 30px;
  background: #ccc;
}

#searchInput {
  width: 100%;
  height: 30px;
  line-height: 30%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 0 5px;
}

#searchResults {
  overflow: auto;
  height: calc(100% - 30px);
}

.amap_lib_placeSearch,
.amap-ui-poi-picker-sugg-container {
  border: none !important;
}

.amap_lib_placeSearch .poibox.highlight {
  background-color: #cae1ff;
}

.poi-more {
  display: none !important;
}
</style>
